import { useRef, useEffect } from 'react';

import * as echarts from 'echarts';
import './index.less';

function echartInit(node: any, xData: Number[], sData: Number[]) {
  const myChart = echarts.init(node, 'dark');
  // 绘制图表
  myChart.setOption({
    backgroundColor: '',
    textStyle: {
      color: '#e0e0e0',
      fontSize: '15px',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['本周预警人数', '上周预警人数'],
      right: '0',
      textStyle: {
        color: '#e0e0e0',
        fontSize: '15px',
      },
    },
    grid: {
      left: '0',
      right: '0',
      bottom: '0',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: true,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    },
    yAxis: [
      {
        type: 'value',
        color: '#86888d',
        splitLine: {
          lineStyle: {
            type: 'dotted',
          },
        },
      },
    ],
    series: [
      {
        name: '本周预警人数',
        type: 'line',
        symbol: 'circle',
        symbolSize: 7,
        itemStyle: {
          color: '#29b6ff',
        },
        data: xData,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(15, 58, 161,0.8)', //靠上方的透明颜色
            },
            {
              offset: 1,
              color: 'rgba(25, 0, 33,0.3)', //靠下方的透明颜色
            },
          ]),
        },
      },
      {
        name: '上周预警人数',
        type: 'line',
        symbol: 'circle',
        symbolSize: 7,
        itemStyle: {
          color: '#ff8915',
        },
        data: sData,
      },
    ],
  });
}
interface MinorProptype {
  xData: Number[];
  sData: Number[];
}
export default function Minor(props: MinorProptype) {
  const { xData, sData } = props;
  const pieRef = useRef<any>();
  useEffect(() => {
    echartInit(pieRef.current, xData, sData);
  }, [xData, sData]);

  window.addEventListener('resize', () => {
    echartInit(pieRef.current, xData, sData);
  });

  return <div ref={pieRef} className="MinorChart"></div>;
}
